<template>
  <el-tooltip
    effect="dark"
    :content="content"
    placement="top"
    :disabled="isShowTooltip"
    v-bind="$attrs"
    :open-delay="200"
    trigger="hover"
    popper-class="my-tooltip"
  >
    <div class="text-wrap" @mouseover="onMouseOver">
      <span ref="text">{{ text }}</span>
    </div>
  </el-tooltip>
</template>

<script>
  // import { Tooltip } from 'element-ui'
  export default {
    name: 'my-tooltip',
    props: {
      // text:{
      //   type: String | Number,
      //   required: true,
      // }
      text:{
        type: String,
        required: true,
      },
    },
    components: {
      // Tooltip
    },
    data() {
      return {
        isShowTooltip: false,
        content: "",
      };
    },
    mounted() {
    },
    methods: {
      onMouseOver(str) {
        // 内容超出，显示文字提示内容
        const tag = this.$refs.text;
        const parentWidth = tag.parentNode.offsetWidth; // 获取元素父级可视宽度
        const contentWidth = tag.offsetWidth; // 获取元素可视宽度
        this.isShowTooltip = contentWidth < parentWidth;
        // 鼠标悬停后显示的内容
        this.content = this.text+"";
      },
    },
  };
</script>

<style lang="scss" scoped>
  .text-wrap {
    //font-size: .08rem;
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

</style>
